<template>
    <div>
        <card>
            <!--搜索条件-->
            <Row>
                <Form :model="filters" ref="form1" label-position="right" :label-width="90" inline>
                    <FormItem label="商品名称" prop="name">
                        <div class="filters-input">
                            <Input type="text" v-model="filters.commodityName" placeholder="请输入商品名称" class="normal-input" clearable></Input>
                        </div>
                    </FormItem>
                    <FormItem label="商品状态" prop="name">
                        <el-select v-model="filters.commodityStatus" clearable placeholder="请选择">
                            <el-option v-for="item in commodityOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="状态" prop="name">
                        <el-select v-model="filters.status" clearable placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery('form1')">搜索</Button>
                    </FormItem>
                </Form>
            </Row>
            <!--操作-->
            <Row>
                <Button type="warning" icon="ios-undo" @click="importModel" style="margin-right: 10px;">同步选品库数据</Button>
            </Row>
            <!--数据列表-->
            <el-table stripe border v-loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="commodityID" label="商品ID"></el-table-column>
                <el-table-column prop="commodityMasterPic" label="商品图片">
                    <template slot-scope="scope">
                        <a target="_blank" :href="scope.row.commodityUrl">
                            <img :src="scope.row.commodityMasterPic"  min-width="120" height="120"/>
                        </a>
                    </template>
                </el-table-column>
                <el-table-column prop="commodityName" label="商品名称"></el-table-column>
                <el-table-column prop="shopName" label="店铺名称"></el-table-column>
                <el-table-column prop="commodityPrice" label="价格"></el-table-column>
                <el-table-column prop="incomeRatio" label="收入比率(%)"></el-table-column>
                <el-table-column prop="commission" label="佣金"></el-table-column>
                <el-table-column prop="commodityStatus" label="商品状态">
                    <template slot-scope="scope">
                        <p v-if="scope.row.commodityStatus == 0" style="color:blue">失效</p>
                        <p v-if="scope.row.commodityStatus == 1" style="color:red">有效</p>
                    </template>
                </el-table-column>
                <el-table-column prop="itemStartDate" label="优惠券开始时间"></el-table-column>
                <el-table-column prop="itemEndDate" label="优惠券结束时间"></el-table-column>
                <el-table-column label="状态" :formatter="statusFormatter">
                    <template slot-scope="scope">
                        <p v-if="scope.row.status == 1" style="color:blue">上架</p>
                        <p v-if="scope.row.status == 2" style="color:red">下架</p>
                    </template>
                </el-table-column>
                <el-table-column label="排序">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.roofPlacement" placeholder="请输入0-99" @change="handleEdit(scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150px">
                    <template slot-scope="scope">
                        <Button size="mini" type="primary" @click="updateStatus(scope.row.id,1)">上架</Button>
                        <Button size="mini" type="error" @click="updateStatus(scope.row.id,2)">下架</Button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
            <!--导入页面-->
            <!--<Modal v-model="importModelStatus" title="导入" class="modal-content" :mask-closable="false">
                <Form  ref="fileform" label-position="right" :label-width="100">
                    <FormItem label="上传文件">
                        <el-upload class="upload-demo" ref="upload" :action="act"
                                   :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList"
                                   :auto-upload="false" accept=".xlsx,.xls" :headers="{'x-access-token':token}"
                                   :on-success="filesuccess" :on-error="filefail" :limit="1" :multiple="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传.xlsx/.xls文件</div>
                        </el-upload>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="text" @click="onCancel">取消</Button>
                    <Button type="primary" @click="submitUpload">确定</Button>
                </div>
            </Modal>-->
        </card>
    </div>
</template>

<script>
    import Cookies from "js-cookie";
    import {TOKEN_KEY} from "@/libs/util";
    const token = Cookies.get(TOKEN_KEY);

    //加载数据
    let loadData=function(){
        if (this.tableLoading) return;
        this.tableLoading = true;
        let params = this.filters;
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;
        this.postRequest("/api/coupon/loadData", params).then(res => {
            this.tableLoading = false;
            if (res.code == 20000) {
                this.tableData = res.data.list;
                this.pageTotal = res.data.total;
            } else {
                this.tableData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };

    //确认上传文件
    let submitUpload=function () {
        if (this.file == null) {
            this.$Message.error("请上传文件");
        }else {
            this.$refs.upload.submit();
            this.importModelStatus = false;
        }
    };

    //上架或下架
    let updateStatus=function (id,status) {
        let params={};
        params.id=id;
        params.status=status;
        this.postRequest("/api/coupon/updateStatus",params).then(res=>{
            if (res.code==20000){
                this.$message.success("更新成功");
                this.loadData();
            } else {
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };

    let handleEdit=function (currentRow) {
        let params={};
        params.id=currentRow.id;
        params.roofPlacement=currentRow.roofPlacement;
        this.postRequest("/api/coupon/updateRoofPlacement",params).then(res=>{
            if (res.code==20000){
                this.$message.success("更新成功");
                this.loadData();
            } else {
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    }

    export default{
        data(){
            return{
                pageNum: 1,
                pageSize: 10,
                pageTotal: 0,
                filters:{},
                tableData:[],
                tableLoading: false,
                importModelStatus: false,
                commodityOptions:[
                    {
                        value:'0',
                        label:'失效',
                    },{
                        value:'1',
                        label:'有效',
                    }
                ],
                options:[
                    {
                        value: '1',
                        label: '上架',
                    },{
                        value: '2',
                        label: '下架',
                    },
                ],
                fileList: [],
                token: token,
            };
        },
        created(){
            this.loadData();
        },
        methods:{
            loadData,
            submitUpload,
            updateStatus,
            handleEdit,
            statusFormatter(row, column){
                if (row.status===1){
                    return "上架"
                } else {
                    return "下架"
                }
            },
            handleQuery(){
                this.loadData();
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            importModel: function () {
                this.getRequest("/api/coupon/syncTbkUatm").then(res=>{
                    if (res.code==20000){
                        this.$message.success("同步成功");
                        this.loadData();
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
                //this.importModelStatus=true;
            },
            handlePreview(file) {
                this.file = file;
            },
            handleRemove(file, fileList) {
            },
            filesuccess(response, file) {
                if (response.code == 20000) {
                    this.$Message.success({
                        content: response.message,
                        duration: 5
                    });
                    this.loadData();
                } else {
                    this.$Modal.error({
                        title: "上传失败",
                        content: response.message
                    });
                }
                this.onCancel();
                this.$refs.upload.clearFiles();
            },
            filefail(response) {
                this.onCancel();
                this.$Modal.error({
                    title: "上传失败",
                    content: "请稍后再试"
                });
                this.$refs.upload.clearFiles();
            },
            onCancel(){
                this.importModelStatus=false;
            }
        },
    };
</script>
